<template>
  <view class="border-top">
    <view
      v-for="(item,index) in purchaseList"
      :key="index"
      class="d-flex single-pdf-edition border-bottom a-center"
      @tap="loadElectronicVersion(item)"
    >
      <view class="zoom-img">
        <image
          :src="item.url"
          style="width: 138upx;height: 210upx;"
          mode=""
        ></image>
      </view>
      <view
        class="d-flex flex-column"
        style="justify-content: space-around;padding: 35upx 0;"
      >
        <text
          class="font-30"
          style="color: #333333;font-weight: bold;margin-bottom: 20upx;"
        >{{item.title}}</text>
        <text
          class="font-24"
          style="color: #757575;margin-bottom: 20upx;"
        >{{item.releaseDate}}</text>
        <text
          class="font-24"
          style="color: #757575;"
        >￥{{item.price}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/common/lib/request.js';
export default {
  data() {
    return {
      username: '',
      purchaseList: []
    }
  },
  onLoad(option) {
    this.username = option.username;
  },
  onShow() {
    this.initPurchaseData()
  },
  methods: {
    initPurchaseData() {
      const _this = this;
      api.request({
        url: '/user/purchaseList',
        data: {
          username: _this.username
        }
      })
        .then(response => {
          console.log(response);
          _this.purchaseList = response.map(item => {
            return {
              title: item.title,
              releaseDate: item.releaseDate.split(' ')[0],
              price: item.price,
              url: item.cover,
              attachHref: item.attachHref
            }
          })
        })
        .catch(err => {
          console.log(err);
        });
    },
    loadElectronicVersion(item) {
      plus.runtime.openURL(item.attachHref);
    }
  }
}
</script>

<style scoped>
.single-pdf-edition {
  width: 100%;
  height: 280upx;
}
.zoom-img {
  padding: 35upx 63upx;
}
.custom-btn {
  width: 120upx;
  height: 50upx;
  line-height: 50upx;
  text-align: center;
  font-size: 24upx;
  margin-right: 50upx;
  color: white;
}
</style>
